
<!doctype html>
<html>
    <head>
       <meta charset="utf-8" http-equiv="refresh" content="60">
        <style>
         /* css ´úÂë  */
        </style>
        <script src="http://cdn.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
        <script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
        <script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
        <script src="http://cdn.hcharts.cn/highcharts/themes/dark-unica.js"></script>
    </head>
    <body>
        <div id="container" style="min-width: 400px; height: 350px"></div>

<script>
$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: '电商交易量实时展示'
        },
        subtitle: {
            text: '数据来源：商城'
        },
        xAxis: [{
            categories: ["11:30","11:25","11:20","11:15","11:10","11:05","11:00","10:55","10:50","10:45","10:40","10:35","10:30","10:25","10:20","10:15","10:10","10:05","10:00","09:55","09:50","09:45","09:40","09:35","09:30","09:25","09:20","09:15","09:10","09:05","09:00","08:55","08:50","08:45","08:40","08:35","08:30","08:25","08:20","08:15","08:10","08:05","08:00","07:55","07:50","07:45","07:40","07:35","07:30","07:25","07:20","07:15","07:10","07:05","07:00","06:55","06:50","06:45","06:40","06:35","06:30","06:25","06:20","06:15","06:10","06:05","06:00","05:55","05:50","05:45","05:40","05:35","05:30","05:25","05:20","05:15","05:10","05:05","05:00","04:55","04:50","04:45","04:40","04:35","04:30","04:25","04:20","04:15","04:10","04:05",],
            crosshair: true
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}笔',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: '交易订单数',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: '交易金额',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} 元',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: '交易金额',
            type: 'column',
            yAxis: 1,
            data: [588.0,1652.0,196.0,999.0,6902.0,926.0,1369.0,1128.0,3358.0,3296.0,1158.0,1138.0,0.0,119.0,429.0,0.0,768.0,0.0,39.0,0.0,913.0,0.0,3538.0,0.0,5628.0,0.0,688.0,0.0,0.0,787.0,0.0,678.0,3282.0,2866.0,0.0,986.0,0.0,0.0,0.0,39.0,0.0,0.0,18597.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,0.0,],
            tooltip: {
                valueSuffix: ' 元'
            }
        }, {
            name: '交易订单数',
            type: 'spline',
            data: [1,8,1,1,6,3,3,2,5,5,2,4,0,1,1,0,2,0,1,0,5,0,13,0,7,0,1,0,0,2,0,1,4,2,0,4,0,0,0,1,0,0,3,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,],
            tooltip: {
                valueSuffix: '笔'
            }
        }]
    });
});


</script>
</body>
</html>